<template>
  <div>
    <headNav title=""></headNav>
    <div class="title">{{article.title}}</div>
    <div class="date">{{article.creationTime}}</div>
    <video controls="controls" v-if="article.videoUrl" :src="article.videoUrl"
    webkit-playsinline playsinline :poster="article.coverImgUrl ? article.coverImgUrl : ''"
    class="videoCss" style="width: 100%; height: 300px" ></video>

    <div v-if="article.describeContent" v-html="article.describeContent" class="vhtmlCss" style="padding: 0 15px; margin-top: 15px;" ></div>

    <div class="share">
      <!-- <div class="num">播放人数：{{article.clickNumber}}</div> -->
      <!-- <img class="share-btn" src="@/assets/img/cms/icon-3.png" alt="" @click="shareClick" > -->
    </div>
  </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import {getDetailsApi} from '@/api/cmsApi'
import wechat from "@/util/wechat"
import {mUrl} from '@/config/config'
export default {
    components: {
        headNav,

    },
    data(){
      return {
        article: ''
      }
    },
    methods: {
      // 点击分享触发事件
      async shareClick () {
        console.log( mUrl + '/study/index.html?articleid=' + this.article.id + '#/cms/detail'.split("?"))
        return
        let value = ''
        this.article.shortContent ? value = this.article.shortContent : value = '暂无简介'
        await wechat.start()
        wechat.shareInvitation({
          link: mUrl + '/study/index.html?articleid=' + this.article.id + '#/cms/detail',
          title: this.article.title,
          desc: value
        })
      }
    },
    async mounted() {
      let num = localStorage.articleMode
      if (num == 2 || num == undefined) {
        // 通过分享进入， 需要根据id查询详情
        // let articleid =
        let res = await getDetailsApi(this.article.id)
        this.article = res
        console.log(res)
      } else {
        // 代表是从列表进入
        this.article = JSON.parse(localStorage.article)
        localStorage.articleMode = 2
      }
    }
}
</script>
<style scoped>
.title{
    padding: 0.3rem; font-size: 0.32rem;
}
.date{
    font-size: 0.24rem; color: #999999;
    padding:0 0 0 0.3rem;
}
.share{
    text-align: right;
    padding: 0.3rem; font-size: 0.24rem; color: #999999;
}
.num{
    display: inline-block; vertical-align: middle;
}
.share-btn{
    width: 0.4rem; height: 0.4rem;
    display: inline-block; vertical-align: middle;
}

</style>
<style>
.vhtmlCss img {
  max-width: 350px !important;
}
</style>
